<template>
	<view>
		<view class="wrap-list wrap">
			<view class="side_left">
				<view class="side_left_title" :class="{'active':courseId==item.course_id}" v-for="(item, index) in courseList" :key="index" @tap="changeCourse(index)">
					<view class="ellipsis-2-lines">{{ item.course_name }}</view>
				</view>
			</view>
			<view class="side_right">
				<scroll-view
					scroll-y 
					style="height: 100%;width: 100%;"
					:refresher-enabled="true"
					:refresher-triggered="triggered" 
					refresher-background="#F3F5F9"
					@refresherrefresh="onRefresh" 
					@refresherrestore="onRestore" 
					@scrolltolower="reachBottom"
				>
					<view v-if="list.length > 0">
						<view class="side_right_title">{{ courseName }}</view>
						<view class="presdete_top">
							<view class="presdete_top_item d-s-c" v-for="(item, index) in list" :key="index" @tap="checkboxChange($event, index)">
								<view class="check_box">
									<u-checkbox v-model="item.check" shape="circle"></u-checkbox>
									<view class="check_box_mask"></view>
								</view>
								<view class="f30 fb">{{ item.word }}</view>
							</view>
						</view>
						<u-loadmore :status="loadStatus" />
					</view>
					<u-empty v-else mode="data"></u-empty>
				</scroll-view>
			</view>
		</view>
		<view class="presdete_bot d-b-c tc">
			<view class="presdete_bo" style="position: relative">
				<view class="">
					<u-badge :count="count" :offset="[-20, -30]"></u-badge>
				</view>
				<view class="f30 gray9">已选</view>
			</view>
			<view class="presdete_bot_but" @tap="startStudy">开始学习</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				route: '',
				courseId: 0,
				courseName: '',
				count: 0,
				ids: '',
				courseList: [],
				list: [],
				page: 1,
				pageSize: 20,
				lastPage: 1,
				loadStatus: 'loadmore',
				triggered: false,
				freshing: false,
			}
		},
		onLoad(option) {
			if (!this.$store.state.isLogin) {
				uni.$u.toast('登录超时请重新登录')
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login',
					});
				}, 1500)
				return false
			} else {
				if (option.route) {
					this.route = option.route
					this.getUserCourse()
				} else {
					uni.navigateBack()
				}
			}
		},
		methods: {
			getUserCourse() {
				this.$u.post(this.$u.api.userCourse, {}).then((res) => {
					this.courseList = res.data
					this.courseId = res.data[0].course_id
					this.courseName = res.data[0].course_name
					this.getCourseWordsList(this.courseId, this.page, this.pageSize)
				}).catch((err) => {
					console.log(err)
				})
			},
			getCourseWordsList(courseId, page, pageSize) {
				this.$u.post(this.$u.api.allCourseWords, {
					course_id: courseId,
					page: page,
					page_size: pageSize
				}).then((res) => {
					let data = res.data
					this.page = data.current_page
					this.lastPage = data.last_page
					this.pageSize = data.per_page
					if (this.page == 1) {
						this.list = []
					}
					for (let i=0;i<data.data.length;i++) {
						let temp = data.data[i]
						temp.check = false
						this.list.push(temp)
					}
					if (data.last_page <= data.current_page) {
						this.loadStatus = 'nomore'
					} else {
						this.loadStatus = 'loadmore'
					}
				}).catch((res) => {
					console.log(res)
				})
			},
			onRefresh() {
				if (this.freshing) {
					return false
				}
				this.freshing = true
				if (!this.triggered) {
					this.triggered = true
				}
				this.getCourseWordsList(this.courseId, 1, this.pageSize)
				setTimeout(() => { 
					this.triggered = false;//触发onRestore，并关闭刷新图标
					this.freshing = false;
				}, 1500) 
			},
			onRestore() { 
				console.log("onRestore")
			}, 
			reachBottom() {
				if (this.page < this.lastPage) {
					this.loadStatus = 'loading'
					setTimeout(() => {
						this.getCourseWordsList(this.courseId, this.page + 1, this.pageSize)
					}, 1500)
				} else {
					this.loadStatus = 'nomore'
				}
			},
			// 选择课程
			changeCourse(i) {
				let course = this.courseList[i]
				console.log(course)
				this.courseId = course.course_id
				this.courseName = course.course_name
				this.getCourseWordsList(this.courseId, 1, this.pageSize)
			},
			// 选择单词
			checkboxChange(e, i) {
				// this.list[i].check = e.value
				this.list[i].check = !this.list[i].check
				let count = 0
				let idArray = []
				for (let j=0;j<this.list.length;j++) {
					let words = this.list[j]
					if (words.check == true) {
						count += 1
						idArray.push(words.id)
					}
				}
				this.count = count
				this.ids = idArray.join(',')
			},
			// 开始识记
			startStudy() {
				if (this.count == 0 || this.ids == '') {
					uni.$u.toast('请选择需要学习的单词')
					return false
				}
				uni.navigateTo({
					url: this.route + '?ids=' + this.ids
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	::v-deep .u-empty {
		height: 80vh !important;
	}
	
	.wrap {
		width: 100%;
		display: flex;
	}
	
	.side_left {
		width: 25%;
		height: 100%;
		background-color: #f1f1f1;
		overflow-y: scroll;
	}
	
	.side_left_title {
		padding: 30rpx;
		font-size: 28rpx;
		color: #999999;
		line-height: 40rpx;
	}
	.active {
		background-color: #FFFFFF !important;
		color: #333333 !important;
	}
	
	.side_right {
		width: 75%;
	}
	
	.side_right_title {
		font-size: 32rpx;
		color: #333333;
		font-weight: 500;
		padding: 30rpx;
	}
	
	.presdete_top {
		// padding-bottom: 300rpx;
	}

	.presdete_top_item {
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 20rpx;
		padding: 30rpx;
		box-sizing: border-box;
		
		.check_box {
			position: relative;
			
			.check_box_mask {
				width: 40rpx;
				height: 40rpx;
				background-color: transparent;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 9;
			}
		}
	}
	.presdete_top_item_box1,.presdete_top_item_box2 {
		width: 50rpx;
		height: 50rpx;
		background: linear-gradient(250deg, #999999, #C8C4C4);
		border-radius: 50%;
	}
	.presdete_top_item_box1.checked {
		width: 50rpx;
		height: 50rpx;
		background: linear-gradient(250deg, #5BA9FF, #2B87F7);
		border-radius: 50%;
	}

	.presdete_top_item_box2.checked {
		width: 50rpx;
		height: 50rpx;
		background: linear-gradient(250deg, #F85548, #F77B2D);
		border-radius: 50%;
	}

	.presdete_bot {
		width: 100%;
		height: 12vh;
		background-color: #ffffff;
		padding: 0 54rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 9;
	}
	.presdete_bot_but{
		width: 216rpx;
		height: 7vh;
		background: linear-gradient(90deg, #1F93FF, #387BEF);
		border-radius: 40rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 7vh;
	}
</style>
